<template>
    <div style="margin-bottom: 16vw;background: #fff;padding-top: 4vw">
      <div class="text">
        <img src="../../assets/img/line.png" alt="">
        <p>精选好品</p>
        <img src="../../assets/img/line.png" alt="" style="transform: rotate(180deg)">
      </div>

        <div class="goods"  v-for="(v,index) in list" :key="index" @click="routeTo(v)">
         <!-- <div class="goods"  v-for="(v,index) in list" :key="index">-->
          <!--<router-link :to="'detail?type=1&join_id=0&group_id=0&limit_id=0&goods_id='+v.goods_id">-->
          <img :src=v.image alt="">
          <div style="width: 100%;height:auto;padding-left: 2vw">
            <p class="scrip" style="height: 11.2vw;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">{{v.goods_name}}</p>
            <p class="price">￥{{v.sell_price}}
              <span class="liked">{{v.popularity}}</span><img src="../../assets/img/fire.png" alt="">
            </p>
          </div>
          <!--</router-link>-->
        </div>
      <div class="clear"></div>
      <div class="width:100%;height:11vw;"></div>
    </div>
</template>

<script>
  import request from '../../request/index'
    export default {
      name: "selectedAds",
      props:["goodsList"],
      data(){
        return{
          list:[],
        }
      },
      inject:["reload"],
      methods:{
        router(){
          window.location.href="http://www.napin.com/download.html"
        },
        routeTo(v){
          this.$router.push({
            path:'detail',query:{type:1,limit_id:0,group_id:0,join_id:0,goods_id:v.goods_id}
          });
         /* this.reload();*/
        }
      },
      created(){
        request.guessLike(this);
      },
    }
</script>

<style scoped lang="scss">
  @media screen and (min-width: 320px) and (max-width: 370px){
    .text{
      width: 94% !important;
    }
  }
.text{
  width:82%;
  height:7vw;
  margin: 0px auto;
  img{
    float:left;
    margin-top: 2.7vw;
    width:37%;
    height: .5vw;
  }
  p{
    float: left;
    font-size: 16px;
    color: #ff5230;
    margin-left:2vw;
    margin-right:2vw;
  };
}
.goods{
  width:44vw;
  height:auto;
  margin:3vw 0vw 3vw 4vw;
  border-radius: 8px;
  background: #f5f5f5;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 /* padding-left: 2vw;*/
  overflow: hidden;
  .price{
    font-size:13px;
    color: #353535;
      .liked{
        font-size: 10px;
        color: #ff4c50;
        float: right;
        margin-right:3vw;
      }
      img{
        width:2.67vw;
        height:3.2vw;
        display: inline-block;
        float: right;
      }
      .oldPrice{
        font-size: 10px;
        color: #888888;
        text-decoration: line-through;
      }
  }
  .hot{
    width:8vw;
    height:4vw;
    background:#ff4c50;
    color: #fff;
    line-height:4vw;
    text-align: center;
    justify-content: center;
    margin-top: 2vw;
    margin-bottom: 2vw;
  }
  .scrop{
    color: #353535;
    font-size: 13px;
    text-align: left;
    margin-bottom: 2vw;
  }
    img{
      width:44vw;
      height:44vw;
      margin-bottom: 2vw;
    }
}
</style>
